<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MyPetStore</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="StyleSheet" href="css/jpetstore.css" type="text/css" media="screen" />
    <script src="js/jquery-3.6.0.js"></script>
    <script src="js/bootstrap.bundle.js"></script>
</head>

<body>

<!--<script src="js/search.js"></script>-->

<div id="Header">
    <div id="Logo">
        <div id="LogoContent">
            <a href="browse?action=viewMain"><img src="images/logo-topbar.gif" /></a>
        </div>
    </div>

    <div id="Menu">
        <div id="MenuContent">
            <a href="service?action=viewCart"><img align="middle" name="img_cart" src="images/cart.gif" /></a>
            <c:if test="${sessionScope.account == null}">
                <img align="middle" src="images/separator.gif" />
                <a href="account?action=signIn">Sign In</a>
            </c:if>
            <c:if test="${sessionScope.account != null}">
                <img align="middle" src="images/separator.gif" />
                <a href="account?action=viewAccountInf">My Account</a>
                <img align="middle" src="images/separator.gif" />
                <a href="service?action=getOrders">My Orders</a>
                <img align="middle" src="images/separator.gif" />
                <a href="account?action=signOut">Sign Out</a>
                <img align="middle" src="images/separator.gif" />
                <a href="service?action=viewLog">Log</a>
            </c:if>
            <img align="middle" src="images/separator.gif" />
            <a href="browse?action=viewHelp">?</a>
        </div>
    </div>

    <div id="Search">
        <div id="SearchContent">
            <form action="browse?action=viewSearchProducts" method="post">
                <input type="text" name="keyword" size="14" id="key" class="inputtable"/>
                <input type="submit" name="searchProducts" value="Search" />
            </form>
        </div>
    </div>

    <!--此处为新添加自动补全显示部分-->
    <div id="context1" style="width:160px;background-color: white;border: 1px solid gray; position: absolute; top: 52px;left: 890px;display: none">
    </div>
    <!--自动补全显示部分到此为止-->

    <div id="QuickLinks">
        <a href="browse?action=viewCategory&categoryId=FISH">
            <img src="images/sm_fish.gif" />
        </a>
        <img src="images/separator.gif" />
        <a href="browse?action=viewCategory&categoryId=DOGS">
            <img src="images/sm_dogs.gif" />
        </a>
        <img src="images/separator.gif" />
        <a href="browse?action=viewCategory&categoryId=REPTILES">
            <img src="images/sm_reptiles.gif" />
        </a>
        <img src="images/separator.gif" />
        <a href="browse?action=viewCategory&categoryId=CATS">
            <img src="images/sm_cats.gif" />
        </a>
        <img src="images/separator.gif" />
        <a href="browse?action=viewCategory&categoryId=BIRDS">
            <img src="images/sm_birds.gif" />
        </a>
    </div>

</div>

<div id="Content">

    <script src="js/jquery-3.6.0.js"></script>
    <script type="text/javascript" src="js/search.js"></script>

